<template>
  <div class="tmpl">
<!-- 使用subimasild子组件做轮播 -->
<SubImgsilder :imagelist="imagelist"></SubImgsilder>	
   <!-- 利用mint swipe做轮播子组件 -->
        <!-- <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in list" :key="index" >
                <img class="img" :src="item.img" alt="轮播图">
            </mt-swipe-item>
        </mt-swipe> -->


<!-- 用mui的9宫格系统的首页选择项 -->
<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<router-link to="/news/newslist">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">新闻资讯</div>
						</router-link>
			    	</li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<router-link to="/photo/photolist">
		                    <span class="mui-icon mui-icon-navigate"></span>
		                    <div class="mui-media-body">热门</div>
						</router-link>
					</li>
		          
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<router-link to="/goods/goodslist">
							<span class="mui-icon mui-icon-gear"></span>
							<div class="mui-media-body">商品购买</div>
						</router-link>
					</li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
							<router-link to="/memder">
								<span class="mui-icon mui-icon-paperplane"></span>
								<div class="mui-media-body">会员中心</div>
							</router-link>
					</li>
				
		          
		        </ul> 
		</div>

<!-- 广告 -->
<div class="adve" v-for="imgs in imgs">
	<div class="adve-left">
      <router-link v-bind='{to:"/goods/goodsinfo/"}'>
		<img :src="imgs.imgs1_url" alt="">
      </router-link>
	</div>
	<div class="adve-right">
		<div class="adve-right-top">
			 <router-link v-bind='{to:"/goods/goodsinfo/"}'>
				<img :src="imgs.imgs2_url" alt="">
			</router-link>
		</div>
		<div class="adve-right-bot">
             <router-link v-bind='{to:"/goods/goodsinfo/"}'>
				<img :src="imgs.imgs3_url" alt="" >
             </router-link>
		</div>
	</div>
</div>


      <!-- 利用mui图文列表做新闻列表 -->
	  <p class="title_p">
		  热点卖点
	  </p>
<ul class="mui-table-view"  v-for="item in list">
    <li class="mui-table-view-cell mui-media">
        <router-link v-bind='{to:"/news/newsinfo.vue"}'>
            <img class="mui-media-object mui-pull-left" src="../../../static/images/aa_2.jpg">
            <div class="mui-media-body">
                {{item.title}}
                <p class="mui_introduction" >
                  {{item.yang}}
                </p>
                <p class='mui-ellipsis'>
                        发表时间：2017/09/09
                    <span>
                        点击数:{{item.click}}
                    </span>
                </p>
            </div>
         </router-link>
    </li>
        <li class="mui-table-view-cell mui-media">
        <router-link v-bind='{to:"/news/newsinfo.vue"}'>
            <img class="mui-media-object mui-pull-left" src="../../../static/images/aa_2.jpg">
            <div class="mui-media-body">
                {{item.title}}
                <p class="mui_introduction">
                  {{item.yang}}
                </p>
                <p class='mui-ellipsis'>
                        发表时间：2017/09/09
                    <span>
                        点击数:{{item.click}}
                    </span>
                </p>
            </div>
         </router-link>
    </li>

</ul>










  </div>
</template>

<script>
//导入subimgsilder.vue子组件
import SubImgsilder from '../subcomp/subimgsilder.vue';
//引用key
// import common from '../../kits/common.js';


export default {
 		data(){
 			return{
				imagelist:[],
						list:[{
                        id:11,
                        title:"华为荣耀9",
                        add_time:"2017-09-09",
                        click:2,
                        img_url:"http://fanyi.baidu.com/static/translation/img/header/logo_cbfea26.png",
                        yang:"购机赠流量券，免费享受价值128元天际通1GB全球流量，还可参与抽奖（荣耀手环3等您拿），现货速发。 2000万变焦双摄，拍照就像用单反；3D沉浸式Hi-Fi音质，听歌就像听现场。"
                   
                   },
                    {
                        id:13,
                        title:"华为荣耀9",
                        add_time:"2017-09-09",
                        click:1,
                        img_url:"http://fanyi.baidu.com/static/translation/img/header/logo_cbfea26.png",
                        yang:"购机赠流量券，免费享受价值128元天际通1GB全球流量，还可参与抽奖（荣耀手环3等您拿），现货速发。 2000万变焦双摄，拍照就像用单反；3D沉浸式Hi-Fi音质，听歌就像听现场。"
                    },
                        {
                        id:14,
                        title:"华为荣耀9",
                        add_time:"2017-09-09",
                        click:1,
                        img_url:"http://fanyi.baidu.com/static/translation/img/header/logo_cbfea26.png",
                        yang:"<p>购机赠流量券，免费享受价值128元天际通1GB全球流量，还可参与抽奖（荣耀手环3等您拿），现货速发。 2000万变焦双摄，拍照就像用单反；3D沉浸式Hi-Fi音质，听歌就像听现场。</p>"
					}],
					imgs:[
						{
						 imgs1_url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506082565714&di=b12d579d5be8d69b25df84d36839ad70&imgtype=0&src=http%3A%2F%2Fimage2.cnpp.cn%2Fupload%2Fimages%2F20160310%2F15203918995_500x314.jpg",
						 imgs2_url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506082588028&di=ccf404b3cdf12da12e2ea9b7b8f6eb20&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01961c5583bd0b000000b18ff70c92.jpg",
						 imgs3_url:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3224581150,3159880899&fm=27&gp=0.jpg",
						},
					],
 			}
			 
//data^
		 }
		 
		 //当前home.vue组件创建后调用数据
		//  ,created(){
		// 		 	this.getlunbo();
		// 	 }
		 ,methods:{
				 	getlunbo(){
						 var url = common.apihost+'/api/gethome/';
						 this.$http.get(url).then(rse=>{
							 //成功则将url数据库（res.body.message）中的数据复制给当前this.list属性
							 this.list = res.body.message;
						 },rse=>{
							 console.log('轮播图获取失败');
						 });

					}

			 }
			 	//  子组件引用
			 ,components:{
				 SubImgsilder
			 }
		
 		
}


</script>


<style lang="scss" scoped>
	.title_p{
		background-color: rgba(237,255,68,.2);
		text-align: center;
		font-size: 18px;
		padding: 10px;
		margin: 10px 0 0 0;
		color: red;
		font-weight: 700
		;
	}
	// 定义9宫格图片样式
	.mui-content{
		background-color: #fff;
	}
.mui-grid-view.mui-grid-9{
	background-color: #fff;
	border-top: none;
  border-left:none;
}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
	  border-right:none;
    border-bottom:none;
	}
.mui-content > .mui-table-view:first-child{
	margin: 0 0;
}
	.mui-icon{
		width:50px ;
		height:50px ;
	}
	.mui-icon-home{
		background-image: url(../../../static/images/menu_bg_01.png);
		background-repeat:round;
	}
		.mui-icon-navigate{
		background-image: url(../../../static/images/menu_bg_06.png);
		background-repeat:round;
	}
		.mui-icon-gear{
		background-image: url(../../../static/images/menu_bg_07.png);
		background-repeat:round;
	}
		.mui-icon-paperplane{
		background-image: url(../../../static/images/menu_bg_11.png);
		background-repeat:round;
	}
		.mui-icon-info{
		background-image: url(../../../static/images/menu_bg_14.png);
		background-repeat:round;
	}
		.mui-icon-help{
		background-image: url(../../../static/images/menu_bg_15.png);
		background-repeat:round;
	}
	.mui-icon-home:before,
	.mui-icon-navigate:before,
	.mui-icon-gear:before,
	.mui-icon-paperplane:before,
	.mui-icon-info:before,
	.mui-icon-help:before
	{
		content: '';
	}

// 轮播图样式
.img{width: 100%;}
 .mint-swipe {
    overflow: hidden;
    position: relative;
    height:  258px;
  }
  .mint-swipe-items-wrap {
    position: relative;
    overflow: hidden;
    height: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
  .mint-swipe-items-wrap > div {
    position: absolute;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    width: 100%;
    height: 100%;
		display: none;
	 /* background: #ff0; */
  }
  .mint-swipe-items-wrap > div.is-active {
    display: block;
    -webkit-transform: none;
    transform: none;
  }
  .mint-swipe-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .mint-swipe-indicator {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
    margin: 0 3px;
  }
  .mint-swipe-indicator.is-active {
    background: #fff;
	}
.mui-table-view .mui-media, .mui-table-view .mui-media-body{
  height: 100px;
}
.mui-table-view-cell > a:not(.mui-btn){
   height: 100px;
   margin: 0px 0px;
   padding: 0 0;
}

.mui-table-view .mui-media-object{
    line-height: 80px;
    max-width: 80px;
    height: 80px;
}
.mui-ellipsis{
    display: flex;
    color: #0094ff;
    font-size: 12px;
    /* margin: 15px 0 0 0 ; */
	}
	.mui-ellipsis span{
    position: absolute;
    top:64px;
    right:50px;
}
.mui_introduction{
  height: 43px;
}

.mui-table-view-cell{
    padding: 8px 8px;
}
.mui-table-view-cell:after ,.mui-table-view:after{
    left: 0;
}

// 广告
.adve{
	height: 140px;
	padding:10px ;
	margin: 10px 0 0 0;
	border-top:1px solid #ccc; 
	border-bottom:1px solid #ccc; 
	background-color: rgba(150,150,150,.1)
}
.adve img{
	width: 100%;
	height: 100%;
}
.adve-left{
	float: left;
	height: 120px;
	width: 48%;
}
.adve-right{
	margin: 0 0 0 50%;
	width:50%;
	height: 120px;
}
.adve-right-top{
	width: 100%;
	height: 50%;
}
.adve-right-bot{
	width: 100%;
	height: 50%;
}
</style>



